<template>
  <el-card shadow="never" style="margin-top: 30px">
    <div class="header">
      <div class="page-header">
        <el-page-header @back="goBack" content="活动详情" style="margin-bottom: 20px">
        </el-page-header>
      </div>
    </div>
    <div class="activityForm">
      <el-form :model="activityRuleForm" ref="activityRuleForm" label-width="120px" class="demo-ruleForm" size="mini">
        <el-form-item label="活动名称" prop="activityTitle">
          <el-input v-model="activityRuleForm.activityTitle"></el-input>
        </el-form-item>
        <el-form-item label="活动类型" prop="activityType">
          <el-select v-model="activityRuleForm.activityType" placeholder="请选择活动类型">
            <el-option label="日常活动" value="1"></el-option>
            <el-option label="志愿者活动" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动内容" prop="tenderContent">
          <div style="border: 1px solid #ccc;">
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
            />
            <Editor
                style="height: 400px; overflow-y: hidden;"
                v-model="activityRuleForm.activityContent"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onChange="onChange"
                @onCreated="onCreated"
            />
          </div>
        </el-form-item>
        <el-form-item label="活动地点" prop="activityPlace">
          <el-input v-model="activityRuleForm.activityPlace"></el-input>
        </el-form-item>
        <el-form-item label="活动人数" prop="activityHuman">
          <el-input-number v-model="activityRuleForm.activityHuman" :min="1" :max="200" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="活动时间" prop="date1">
          <el-date-picker
              v-model="activityRuleForm.date1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="报名时间" prop="date2">
          <el-date-picker
              v-model="activityRuleForm.date2"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateActivityById">立即修改</el-button>
          <el-button @click="resetForm('activityRuleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>


  </el-card>
</template>

<script>
import {getActivityById, updateActivityById, uploadImage} from "@/api/allApi";
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";

export default {
  name: "ActivityDetail",
  components: {Editor, Toolbar},
  data() {

    // form表单自定义验证规则，开始时间不可大于结束时间
    var endTimeRules = (rule, value, callback) => {
      if(this.activityRuleForm.date1[0] < this.activityRuleForm.date2[1]){
        callback(new Error('活动开始时间不能在报名截止时间之前，请检查'));
      }else {
        callback();
      }
    }

    return {
      activityRuleForm: {
        activityTitle: '',
        activityType: '',
        activityContent: '',
        activityPlace: '',        // date1: null,
        // date2: null,
        activityStarttime:'',
        activityEndtime:'',
        activityBegintime:'',
        activityDeadline:'',
        activityHuman: 1,
      },
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          //配置上传图片
          uploadImage: {
            customUpload: this.uploadImg,
          },
        }
      },
      mode: 'simple', // or 'default'
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }]
      },
    }
  },

  methods:{
    goBack() {
      this.$router.back();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    getActivityById() {
      getActivityById(
          this.$route.params.activityId
      ).then(res=>{
        if (res.data.success){
          this.activityRuleForm = res.data.data
          let date1 = [];
          let date2 = [];
          this.$set(date1,0,new Date(res.data.data.activityStarttime))//回显的日期
          this.$set(date1,1,new Date(res.data.data.activityEndtime))//回显的日期
          this.$set(date2,0,new Date(res.data.data.activityBegintime))//回显的日期
          this.$set(date2,1,new Date(res.data.data.activityDeadline))//回显的日期

          this.$set(this.activityRuleForm,'date1',date1)//回显的日期
          this.$set(this.activityRuleForm,'date2',date2)//回显的日期
          // this.activityRuleForm.date1 = date1
          // this.activityRuleForm.date2 = date2
        }else{
          this.$message.error("参数错误")
        }
      })
    },
    //上传图片
    uploadImg(file, insertFn) {
      //调接口，上传图片
      uploadImage({file: file}).then(res => {
        if (res.data.errno === 0) {
          insertFn(res.data.data.url);
          this.$message.success("上传成功")
        }
        else {
          this.$message.error("上传失败")
        }
      })
    },
    onChange () {
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      this.toolbarConfig.excludeKeys = [
        'group-video'
      ]
    },
    updateActivityById(){
      this.activityRuleForm.activityStarttime = this.activityRuleForm.date1[0]
      this.activityRuleForm.activityEndtime = this.activityRuleForm.date1[1]
      this.activityRuleForm.activityBegintime = this.activityRuleForm.date2[0]
      this.activityRuleForm.activityDeadline = this.activityRuleForm.date2[1]
      // 获取不带html标签的纯文本，存入数据库作为摘要
      this.activityRuleForm.activityDigest = this.editor.getText()
      updateActivityById(this.activityRuleForm).then(res=>{
        if (res.data.success){
          this.$message.success(res.data.data)
        }else{
          this.$message.error(res.data.errorMsg)
        }

      })
    }
  },
  mounted() {
    this.getActivityById()
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style scoped>

</style>